<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Accounting Portal - CarbonTrack</title>
  <link rel="icon" href="/img/team.jpg" type="image/JPG">
  <!-- 引入Bootstrap和jQuery的CDN链接 -->
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
  <!-- SF Pro font -->
  <link href="https://fonts.cdnfonts.com/css/sf-pro-display" rel="stylesheet">
  <!-- Intersection Observer polyfill for older browsers -->
  <script src="https://cdn.jsdelivr.net/npm/intersection-observer@0.12.2/intersection-observer.js"></script>
  <!-- iOS设计CSS -->
  <link rel="stylesheet" href="./css/ios-design.css">
  <script src="js/utils.js"></script>
  <script src="js/nav.js"></script>
  <link rel="stylesheet" href="./css/index.css">
  <style>
    :root {
      /* 明亮模式颜色变量 */
      --text-color-light: #000;
      --text-color-dark: #fff;
      --bg-color-light: #f2f2f7;
      --bg-color-dark: #1c1c1e;
      --card-bg-light: #fff;
      --card-bg-dark: #2c2c2e;
      --input-bg-light: #fff;
      --input-bg-dark: #3a3a3c;
      --border-color-light: #d1d1d6;
      --border-color-dark: #38383a;
      --muted-text-light: #8e8e93;
      --muted-text-dark: #aeaeb2;
      --alert-bg-light: #d1ecf1;
      --alert-bg-dark: rgba(59, 130, 246, 0.2);
      --alert-text-light: #0c5460;
      --alert-text-dark: #fff;
    }
    
    body {
      transition: background-color 0.3s ease, color 0.3s ease;
    }

    /* 暗色模式样式 */
    body.dark-theme,
    body.auto-theme.dark-mode {
      background-color: var(--bg-color-dark);
      color: var(--text-color-dark);
    }

    /* 确保暗色模式下所有文本可见 */
    body.dark-theme label,
    body.auto-theme.dark-mode label,
    body.dark-theme h1, 
    body.dark-theme h2, 
    body.dark-theme h3,
    body.dark-theme h4,
    body.dark-theme h5,
    body.auto-theme.dark-mode h1,
    body.auto-theme.dark-mode h2,
    body.auto-theme.dark-mode h3,
    body.auto-theme.dark-mode h4,
    body.auto-theme.dark-mode h5,
    body.dark-theme p,
    body.auto-theme.dark-mode p {
      color: var(--text-color-dark);
    }

    /* 表单控件暗色模式 */
    body.dark-theme .form-control,
    body.auto-theme.dark-mode .form-control {
      background-color: var(--input-bg-dark);
      border-color: var(--border-color-dark);
      color: var(--text-color-dark);
    }

    body.dark-theme select.form-control option,
    body.auto-theme.dark-mode select.form-control option {
      background-color: var(--input-bg-dark);
      color: var(--text-color-dark);
    }

    /* 表单文本和提示信息 */
    body.dark-theme .form-text.text-muted,
    body.auto-theme.dark-mode .form-text.text-muted {
      color: var(--muted-text-dark) !important;
    }

    /* 卡片暗色模式 */
    body.dark-theme .calculator-card,
    body.auto-theme.dark-mode .calculator-card {
      background-color: var(--card-bg-dark);
      border: 1px solid var(--border-color-dark);
    }

    body.dark-theme .calculator-header,
    body.auto-theme.dark-mode .calculator-header {
      background-color: rgba(60, 60, 67, 0.3);
      border-bottom: 1px solid var(--border-color-dark);
    }

    body.dark-theme .calculator-body,
    body.auto-theme.dark-mode .calculator-body {
      background-color: var(--card-bg-dark);
    }

    /* 活动卡片 */
    body.dark-theme .activity-card,
    body.auto-theme.dark-mode .activity-card {
      background-color: var(--card-bg-dark);
      border-color: var(--border-color-dark);
    }

    /* 警告框 */
    body.dark-theme .alert-info,
    body.auto-theme.dark-mode .alert-info {
      background-color: var(--alert-bg-dark);
      border-color: rgba(59, 130, 246, 0.3);
      color: var(--alert-text-dark);
    }

    /* 按钮 */
    body.dark-theme .btn-outline-info,
    body.auto-theme.dark-mode .btn-outline-info {
      color: #64D2FF;
      border-color: #64D2FF;
    }

    body.dark-theme .btn-outline-info:hover,
    body.auto-theme.dark-mode .btn-outline-info:hover {
      background-color: rgba(100, 210, 255, 0.2);
      color: #fff;
    }

    body.dark-theme .btn-outline-primary,
    body.auto-theme.dark-mode .btn-outline-primary {
      color: #64D2FF;
      border-color: #64D2FF;
    }

    body.dark-theme .btn-outline-primary:hover,
    body.auto-theme.dark-mode .btn-outline-primary:hover {
      background-color: rgba(100, 210, 255, 0.2);
      color: #fff;
    }

    /* 模态框 */
    body.dark-theme .modal-content,
    body.auto-theme.dark-mode .modal-content {
      background-color: var(--card-bg-dark);
      border-color: var(--border-color-dark);
    }

    body.dark-theme .modal-header,
    body.auto-theme.dark-mode .modal-header,
    body.dark-theme .modal-footer,
    body.auto-theme.dark-mode .modal-footer {
      border-color: var(--border-color-dark);
    }

    body.dark-theme .close,
    body.auto-theme.dark-mode .close {
      color: var(--text-color-dark);
      text-shadow: none;
    }

    /* 主题切换按钮 */
    .theme-toggle {
      position: fixed;
      right: 20px;
      bottom: 20px;
      width: 48px;
      height: 48px;
      border-radius: 24px;
      background-color: #f2f2f7;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      z-index: 1000;
      transition: all 0.3s ease;
    }

    body.dark-theme .theme-toggle,
    body.auto-theme.dark-mode .theme-toggle {
      background-color: #3a3a3c;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }

    .theme-toggle i {
      font-size: 22px;
      color: #8e8e93;
      transition: color 0.3s ease;
    }

    body.dark-theme .theme-toggle i,
    body.auto-theme.dark-mode .theme-toggle i {
      color: #fff;
    }
    
    /* 保留原始样式 */
    .calc-header {
      background: linear-gradient(135deg, var(--ios-green), var(--ios-mint));
      color: white;
      padding: 120px 0 80px;
      text-align: center;
      border-radius: 0 0 24px 24px;
      margin-bottom: 40px;
    }
    
    .calc-header h1 {
      font-weight: 700;
      color: white;
      margin-bottom: 16px;
    }
    
    .calc-header p {
      font-size: 1.2rem;
      opacity: 0.9;
      max-width: 700px;
      margin: 0 auto;
    }
    
    .calculator-card {
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
      background-color: var(--ios-system-background);
      margin-bottom: 30px;
    }
    
    .calculator-header {
      background-color: var(--ios-gray6);
      padding: 20px 24px;
      border-bottom: 1px solid var(--ios-gray5);
    }
    
    .calculator-header h2 {
      margin: 0;
      font-weight: 700;
      font-size: 1.5rem;
    }
    
    .calculator-body {
      padding: 24px;
    }
    
    .result-card {
      background: linear-gradient(135deg, var(--ios-blue), var(--ios-indigo));
      color: white;
      border-radius: 24px;
      padding: 24px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
      margin-top: 24px;
    }
    
    .result-card h3 {
      color: white;
      margin-bottom: 16px;
      font-weight: 700;
    }
    
    .result-value {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 8px;
    }
    
    .result-unit {
      font-size: 1.1rem;
      opacity: 0.9;
    }
    
    .activity-card {
      background-color: var(--ios-gray6);
      border-radius: 16px;
      padding: 20px;
      margin-bottom: 20px;
      border: 1px solid var(--ios-gray5);
    }
    
    .activity-card h4 {
      font-weight: 600;
      margin-bottom: 16px;
    }
    
    .progress {
      height: 10px;
      margin: 10px 0;
      border-radius: 5px;
    }
    
    .progress-bar {
      background-color: var(--ios-green);
    }

    /* 成功模态框样式 */
    .success-modal .modal-header {
      background: linear-gradient(135deg, var(--ios-green), var(--ios-mint));
      color: white;
      border-bottom: none;
    }
    
    .success-modal .modal-body {
      padding: 25px;
    }
    
    .success-modal .modal-footer {
      border-top: none;
      justify-content: center;
    }
    
    .success-icon {
      font-size: 48px;
      color: var(--ios-green);
      margin-bottom: 15px;
    }
    
    body.dark-theme .success-icon,
    body.auto-theme.dark-mode .success-icon {
      color: #30D158;
    }
    
    .points-value {
      font-size: 36px;
      font-weight: 700;
      color: var(--ios-green);
      margin: 15px 0;
    }
    
    body.dark-theme .points-value,
    body.auto-theme.dark-mode .points-value {
      color: #30D158;
    }
    
    /* 确保模态框中的按钮在深色模式下可见 */
    body.dark-theme .success-modal .btn-success,
    body.auto-theme.dark-mode .success-modal .btn-success {
      background-color: #30D158;
      border-color: #30D158;
    }

    /* iOS风格的选择器样式 */
    .form-control.ios-select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      padding-right: 30px;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238E8E93' viewBox='0 0 16 16'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>");
      background-repeat: no-repeat;
      background-position: calc(100% - 12px) center;
      background-size: 12px;
      cursor: pointer;
      transition: all 0.3s ease;
      border-radius: 12px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
      border: 1px solid var(--border-color-light);
      font-weight: 500;
      padding: 12px 16px;
      height: auto;
    }
    
    .form-control.ios-select:hover {
      border-color: var(--ios-gray4);
      box-shadow: 0 4px 8px rgba(0,0,0,0.08);
      transform: translateY(-1px);
    }
    
    .form-control.ios-select:focus {
      border-color: var(--ios-green);
      box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.25);
      outline: none;
    }
    
    /* 深色模式样式调整 */
    body.dark-theme .form-control.ios-select,
    body.auto-theme.dark-mode .form-control.ios-select {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23AEAEB2' viewBox='0 0 16 16'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>");
      border-color: var(--border-color-dark);
      background-color: var(--input-bg-dark);
      color: var(--text-color-dark);
      box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    }
    
    body.dark-theme .form-control.ios-select:hover,
    body.auto-theme.dark-mode .form-control.ios-select:hover {
      border-color: var(--ios-gray3);
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
    
    body.dark-theme .form-control.ios-select:focus,
    body.auto-theme.dark-mode .form-control.ios-select:focus {
      border-color: #30D158;
      box-shadow: 0 0 0 3px rgba(48, 209, 88, 0.3);
    }
    
    /* 下拉项样式 */
    select.ios-select option {
      padding: 12px;
      font-weight: 400;
    }
    
    /* 选择器标签样式 */
    .ios-select-group label {
      font-size: 16px;
      font-weight: 600;
      color: var(--ios-label);
      margin-bottom: 8px;
      transition: color 0.3s ease;
    }
    
    /* 添加动画过渡 */
    .form-group.ios-select-group {
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    
    /* 标签单位徽章 */
    .ios-unit-badge {
      display: inline-block;
      background-color: var(--ios-gray6);
      color: var(--ios-gray);
      font-size: 12px;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 10px;
      margin-left: 8px;
      transition: all 0.3s ease;
    }
    
    body.dark-theme .ios-unit-badge,
    body.auto-theme.dark-mode .ios-unit-badge {
      background-color: rgba(255, 255, 255, 0.1);
      color: var(--muted-text-dark);
    }

    /* 文件上传拖拽区样式 */
    .file-drop-area {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 30px;
      border: 2px dashed var(--border-color-light);
      border-radius: 16px;
      background: rgba(242, 242, 247, 0.5);
      transition: all 0.3s ease;
      cursor: pointer;
      margin-bottom: 20px;
      text-align: center;
    }
    
    body.dark-theme .file-drop-area,
    body.auto-theme.dark-mode .file-drop-area {
      border-color: var(--border-color-dark);
      background: rgba(44, 44, 46, 0.5);
    }
    
    .file-drop-area.is-active {
      border-color: var(--ios-green);
      background: rgba(52, 199, 89, 0.1);
    }
    
    body.dark-theme .file-drop-area.is-active,
    body.auto-theme.dark-mode .file-drop-area.is-active {
      border-color: #30D158;
      background: rgba(48, 209, 88, 0.15);
    }
    
    .file-upload-icon {
      font-size: 36px;
      color: var(--ios-green);
      margin-bottom: 12px;
      transition: all 0.3s ease;
    }
    
    body.dark-theme .file-upload-icon,
    body.auto-theme.dark-mode .file-upload-icon {
      color: #30D158;
    }
    
    .file-message {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 8px;
      color: var(--text-color-light);
      transition: color 0.3s ease;
    }
    
    body.dark-theme .file-message,
    body.auto-theme.dark-mode .file-message {
      color: var(--text-color-dark);
    }
    
    .file-input {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      cursor: pointer;
      opacity: 0;
    }
    
    .file-input:focus + .file-message {
      text-decoration: underline;
    }
    
    .file-drop-info {
      font-size: 14px;
      color: var(--muted-text-light);
      margin-top: 8px;
      transition: color 0.3s ease;
    }
    
    body.dark-theme .file-drop-info,
    body.auto-theme.dark-mode .file-drop-info {
      color: var(--muted-text-dark);
    }
    
    /* 图片预览容器 */
    .image-preview-container {
      position: relative;
      margin-top: 16px;
      width: 100%;
      max-width: 300px;
      margin: 16px auto 0;
      display: none;
    }
    
    .image-preview-container img {
      width: 100%;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
    }
    
    body.dark-theme .image-preview-container img,
    body.auto-theme.dark-mode .image-preview-container img {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
    
    .remove-image-btn {
      position: absolute;
      top: -10px;
      right: -10px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(255, 59, 48, 0.9);
      border: 2px solid white;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 14px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
      transition: all 0.2s ease;
    }
    
    .remove-image-btn:hover {
      transform: scale(1.1);
      background: rgba(255, 59, 48, 1);
    }
    
    body.dark-theme .remove-image-btn,
    body.auto-theme.dark-mode .remove-image-btn {
      border-color: var(--card-bg-dark);
    }
    
    .file-name {
      font-size: 14px;
      color: var(--ios-green);
      text-align: center;
      margin-top: 8px;
      font-weight: 500;
      word-break: break-all;
      display: none;
    }
    
    body.dark-theme .file-name,
    body.auto-theme.dark-mode .file-name {
      color: #30D158;
    }
    
    /* 计算器卡片增强样式 */
    .calculator-card {
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      transition: transform 0.4s ease, box-shadow 0.4s ease, background-color 0.3s ease;
      margin-bottom: 30px;
    }
    
    .calculator-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
    }
    
    body.dark-theme .calculator-card:hover,
    body.auto-theme.dark-mode .calculator-card:hover {
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
    }
    
    .calculator-header {
      background: linear-gradient(135deg, var(--ios-green), var(--ios-mint));
      color: white;
      padding: 24px 28px;
      position: relative;
      overflow: hidden;
    }
    
    .calculator-header h2 {
      font-weight: 700;
      margin: 0;
      position: relative;
      z-index: 1;
    }
    
    /* 头部光晕效果 */
    .calculator-header:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent 80%);
      pointer-events: none;
    }
    
    .calculator-body {
      padding: 28px;
      background-color: var(--card-bg-light);
      transition: background-color 0.3s ease;
    }
    
    body.dark-theme .calculator-body,
    body.auto-theme.dark-mode .calculator-body {
      background-color: var(--card-bg-dark);
    }
    
    /* 进度条美化 */
    .progress {
      height: 8px;
      border-radius: 4px;
      background-color: rgba(52, 199, 89, 0.1);
      margin: 10px 0;
      overflow: hidden;
    }
    
    body.dark-theme .progress,
    body.auto-theme.dark-mode .progress {
      background-color: rgba(48, 209, 88, 0.15);
    }
    
    .progress-bar {
      background: linear-gradient(to right, var(--ios-green), var(--ios-mint));
      border-radius: 4px;
      transition: width 0.3s ease;
    }
    
    body.dark-theme .progress-bar,
    body.auto-theme.dark-mode .progress-bar {
      background: linear-gradient(to right, #30D158, #64D2FF);
    }

    /* 拖拽动画 */
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.03); }
      100% { transform: scale(1); }
    }
    
    .file-drop-area.is-active {
      animation: pulse 1.2s infinite ease-in-out;
    }
  </style>
  <script>
    $(document).ready(function () {
      var token = localStorage.getItem('token')
      if (token) {
        // 用户已登录
      } else {
        $('#userPoints').text('未登录')
        showAlert('请先登录。', 'warning', function() {
        window.location.href = 'index.html'
        })
      }
      // 初始化活动小类选项
      updateActivityOptions($('#category').val())
      calculateAndDisplayReduction() // 确保活动选项已填充
      $('#dataInput, #activity').on('input change', calculateAndDisplayReduction)
      
      $('#carbonForm').submit(function (e) {
        e.preventDefault()
        
        // 检查是否有上传照片
        var imageFile = $('#imageUpload')[0].files[0];
        if (!imageFile) {
          $('#submissionResult').html('<div class="alert alert-danger">请上传照片作为证明！Please upload a photo as evidence!</div>');
          return false;
        }
        
        var formData = new FormData(this)
        formData.append('oridata', parseFloat($('#dataInput').val()) || 0)
        formData.append('token', localStorage.getItem('token'))
        // Add Turnstile response
        // formData.append('cf-turnstile-response', $('#carbonForm [name="cf-turnstile-response"]').val());
        // 移除id参数，让服务器端通过token获取用户ID
        
        // Check if Turnstile response exists
        if (!formData.get('cf-turnstile-response')) {
          showAlert('请完成人机验证 Please complete the verification.', 'warning');
          $('#submitButton').prop('disabled', false).html('Submit Carbon Reduction'); // Re-enable button
          return; 
        }
        
        // 显示加载状态
        $('#submitButton').prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 提交中...');
        $('.progress').show();

        $.ajax({
          type: 'POST',
          url: 'calculate.php',
          data: formData,
          processData: false,
          contentType: false,
          dataType: 'json',
          xhr: function () {
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener('progress', function (evt) {
              if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                percentComplete = parseInt(percentComplete * 100);
                $('.progress-bar').width(percentComplete + '%');
                $('.progress-bar').text(percentComplete + '%');
              }
            }, false);
            return xhr;
          },
          success: function (response) {
            // 恢复按钮状态
            $('#submitButton').prop('disabled', false).html('Submit Carbon Reduction');
            
            if (response.success === true) {
              // 提交成功，更新用户积分
              console.log('Carbon footprint recorded successfully. Carbon reduction: ' + response.points);
              
              // 显示成功模态框而不是内联提示
              $('#successPoints').text(response.points);
              $('#successModal').modal('show');
              
              getUserPoints(); // 更新用户积分显示
              
              // 清空表单
              $('#carbonForm')[0].reset();
              $('#imagePreview').attr('src', '').hide();
              $('.progress-bar').width('0%').text('');
              
              // 重新初始化选项
              updateActivityOptions($('#category').val());
              
              // 发送确认邮件
              sendEmail(localStorage.getItem('token'));
            } else {
              // 提交失败，显示错误消息
              console.error('Error recording carbon footprint:', response.message);
              $('#submissionResult').html('<div class="alert alert-danger">Error: ' + response.message + '</div>');
              
              // 如果是令牌失效，提示用户重新登录
              if (response.message === '令牌无效或已过期。') {
                showAlert('令牌无效或已过期，请重新登录。', 'error', function() {
                  // 重定向到登录页面
                  window.location.href = 'index.html';
                });
              }
            }
          },
          error: function (xhr) {
            // 恢复按钮状态
            $('#submitButton').prop('disabled', false).html('Submit Carbon Reduction');
            $('.progress-bar').width('0%').text('');
            
            var errorMsg = '提交失败，请重试。Submit failed, please try again.';
            if (xhr.responseJSON && xhr.responseJSON.message) {
              errorMsg += ' Error: ' + xhr.responseJSON.message;
            }
            $('#submissionResult').html('<div class="alert alert-danger">' + errorMsg + '</div>');
            console.error('AJAX请求失败', xhr);
          }
        });
      });

      // 活动大类改变时更新活动小类选项
      $('#category').change(function () {
        updateActivityOptions($(this).val());
        calculateAndDisplayReduction();
      });

      // 获取用户积分
      getUserPoints();
      
      // 拖拽上传文件功能
      initDragAndDropUpload();
      
      function initDragAndDropUpload() {
        var dropArea = $('.file-drop-area');
        var fileInput = $('#imageUpload');
        var fileNameDisplay = $('.file-name');
        var previewContainer = $('.image-preview-container');
        var previewImage = $('#imagePreview');
        
        // 防止浏览器默认行为
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
          dropArea[0].addEventListener(eventName, preventDefaults, false);
        });
        
        function preventDefaults(e) {
          e.preventDefault();
          e.stopPropagation();
        }
        
        // 高亮拖拽区域
        ['dragenter', 'dragover'].forEach(eventName => {
          dropArea[0].addEventListener(eventName, highlight, false);
        });
        
        ['dragleave', 'drop'].forEach(eventName => {
          dropArea[0].addEventListener(eventName, unhighlight, false);
        });
        
        function highlight() {
          dropArea.addClass('is-active');
        }
        
        function unhighlight() {
          dropArea.removeClass('is-active');
        }
        
        // 处理拖放文件
        dropArea[0].addEventListener('drop', handleDrop, false);
        
        function handleDrop(e) {
          const dt = e.dataTransfer;
          const files = dt.files;
          if (files.length) {
            fileInput[0].files = files;
            updateFileInfo(files[0]);
          }
        }
        
        // 点击选择文件时也更新显示
        fileInput.on('change', function() {
          if (this.files.length) {
            updateFileInfo(this.files[0]);
          }
        });
        
        // 更新文件信息和预览
        let currentBlobUrl = null; // Variable to store the current blob URL

        function updateFileInfo(file) {
          // Revoke the previous blob URL if it exists
          if (currentBlobUrl) {
            URL.revokeObjectURL(currentBlobUrl);
            currentBlobUrl = null;
          }

          // Frontend check for file size (5MB limit)
          if (file.size > 5 * 1024 * 1024) { // 5 MB in bytes
            showAlert('File is too large. Maximum size is 5MB.', 'warning');
            fileInput.val(''); // Clear the input
            return;
          }
          
          // 只接受图片文件
          if (!file.type.match('image.*')) {
            showAlert('Please select an image file', 'warning');
            fileInput.val(''); // Clear the input
            return;
          }
          
          // 显示文件名
          fileNameDisplay.text(file.name).show();
          
          // --- Use URL.createObjectURL for preview ---
          currentBlobUrl = URL.createObjectURL(file);
          previewImage.attr('src', currentBlobUrl);
          previewContainer.show();
          // ---------------------------------------------
            
          // 隐藏初始上传图标和文本
          $('.file-upload-icon, .file-message').hide();
          $('.file-drop-info').text('To change the image, click or drop a new file');
        }
        
        // 移除图片按钮
        $('.remove-image-btn').on('click', function() {
          // Revoke the blob URL when removing the image
          if (currentBlobUrl) {
            URL.revokeObjectURL(currentBlobUrl);
            currentBlobUrl = null;
          }
          fileInput.val('');
          previewContainer.hide();
          fileNameDisplay.hide();
          $('.file-upload-icon, .file-message').show();
          $('.file-drop-info').text('Supports: JPG, PNG, GIF (Max 5MB)');
        });
      }
      
      // 默认隐藏进度条
      $('.progress').hide();
      
      // 主题切换功能
      // 检查用户是否有保存的偏好
      const savedTheme = localStorage.getItem('theme');
      const body = document.body;
      
      if (savedTheme) {
        body.className = savedTheme;
        updateThemeIcon(savedTheme);
      } else {
        body.classList.add('auto-theme');
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
          body.classList.add('dark-mode');
        }
        updateThemeIcon('auto-theme');
      }
      
      // 监听系统暗模式变化
      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
        if (body.classList.contains('auto-theme')) {
          if (e.matches) {
            body.classList.add('dark-mode');
          } else {
            body.classList.remove('dark-mode');
          }
          updateThemeIcon('auto-theme');
        }
      });
      
      // 创建主题切换按钮
      const themeToggle = document.createElement('div');
      themeToggle.className = 'theme-toggle';
      themeToggle.id = 'themeToggle';
      themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
      document.body.appendChild(themeToggle);
      
      // 为主题切换按钮添加点击事件
      themeToggle.addEventListener('click', function() {
        if (body.classList.contains('auto-theme')) {
          body.classList.remove('auto-theme');
          body.classList.remove('dark-mode');
          body.classList.add('dark-theme');
          localStorage.setItem('theme', 'dark-theme');
        } else if (body.classList.contains('dark-theme')) {
          body.classList.remove('dark-theme');
          body.classList.add('light-theme');
          localStorage.setItem('theme', 'light-theme');
        } else {
          body.classList.remove('light-theme');
          body.classList.add('auto-theme');
          if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            body.classList.add('dark-mode');
          }
          localStorage.setItem('theme', 'auto-theme');
        }
        updateThemeIcon(body.className);
      });
      
      function updateThemeIcon(theme) {
        const icon = document.querySelector('#themeToggle i');
        if (!icon) return;
        
        if (theme.includes('dark-theme')) {
          icon.className = 'fas fa-sun';
        } else if (theme.includes('light-theme')) {
          icon.className = 'fas fa-moon';
        } else {
          // Auto theme
          if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            icon.className = 'fas fa-sun';
          } else {
            icon.className = 'fas fa-moon';
          }
        }
      }

      // 添加iOS选择器样式
      $('#category, #activity').addClass('ios-select');
      $('#category, #activity').closest('.form-group').addClass('ios-select-group');
      
      // 包装单位标签为徽章
      $('#unitLabel').addClass('ios-unit-badge');
      
      // 添加选择器变化动画
      $('#category').change(function() {
        const activityGroup = $('#activity').closest('.form-group');
        activityGroup.css('opacity', 0.5);
        activityGroup.css('transform', 'translateY(-5px)');
        
        setTimeout(function() {
          updateActivityOptions($('#category').val());
          activityGroup.css('opacity', 1);
          activityGroup.css('transform', 'translateY(0)');
        }, 200);
      });
      
      // 为数量输入添加iOS样式
      $('#dataInput').addClass('ios-select');
      $('#dataInput').closest('.form-group').addClass('ios-select-group');
      
      // 日期选择器iOS风格
      $('#date').addClass('ios-select');
      $('#date').closest('.form-group').addClass('ios-select-group');
    });
    
    // 发送邮件函数
    function sendEmail(token) {
      fetch('stm.php', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'token=' + encodeURIComponent(token),
      })
        .then(response => response.json())
        .then(data => {
          if (!data.success) {
            console.error('邮件发送失败：' + data.message);
          }
        })
        .catch((error) => {
          console.error('Error sending email:', error);
        });
    }

    // 更新活动小类选项的函数
    function updateActivityOptions(category) {
      // 清空当前选项
      $('#activity').empty();
      
      // 活动选项映射 2.0算法
      var options = {
        'Sustainable Mobility': [  
              '公交地铁通勤 / Use public transport',
              '骑行探索城市 / Explore the city by bike',
              '拼车 / Carpool',
              '自行车出行 / Travel by bike',
              '乘坐快轨去机场 / Take high-speed rail to the airport'
            ],
        'Circular Economy': [
              '购物时自带袋子 / Bring your own bag when shopping',
              '出门自带水杯 / Bring your own water bottle',
              '减少使用一次性餐盒 / Reduce disposable meal boxes',
              '点外卖选择"无需餐具" / Choose No-Cutlery when ordering delivery',
              '垃圾分类 / Sort waste properly',
              '旅行时自备洗漱用品 / Bring your own toiletries when traveling',
              '旧物改造 / Repurpose old items',
              '简易包装礼物 / Use minimal gift wrapping',
              '减少打印纸 / Reduce unnecessary printing paper',
              '化妆品用完购买替代装 / Buy refillable cosmetics or toiletries',
              '购买二手书 / Buy a second-hand book',
              '购买白色或浅色衣物 / Buy white or light-colored clothes',
              '购买一级能效家电 / Buy an energy-efficient appliance',
              '种一棵树 / Plant a tree'  
            ],
        'Low-Carbon Diet': [
              '光盘行动 / Finish all food on the plate',
              '吃完水果蔬菜 / Finish all fruits and vegetables',
              '吃一顿轻食 / Have a light meal',
              '喝燕麦奶或植物基食品 / Drink oat milk or plant-based food',
              '购买本地应季水果 / Buy local seasonal fruits',
              '自己种菜并吃 / Grow and eat your own vegetables',
              '自己做饭 / Cook at home'
            ],
        'Green Lifestyle': [
              '早睡觉一小时 / Sleep an hour earlier',
              '刷牙时关掉水龙头 / Turn off the tap while brushing teeth',
              '下班时关电脑和灯 / Turn off computer and lights when off-duty',
              '晚上睡觉全程关灯 / Keep lights off at night',
              '快速洗澡 / Take a quick shower',
              '夏天空调调至26°C以上 / Set AC to above 78°F during Summer',
              '自然风干湿发 / Air-dry wet hair',
              '阳光晾晒衣服 / Sun-dry clothes',
              '减少使用手机时间 / Reduce screen time',
              '夜跑 / Night running',
              '花一天享受户外 / Spend a full day outdoors',
              '攒够一桶衣服再洗 / Save and wash a full load of clothes'  
            ]
      };
      
      // 中英文类别映射
      var categoryMapping = {
        '绿色生活': 'Green Lifestyle',
        '低碳饮食': 'Low-Carbon Diet',
        '绿色出行': 'Sustainable Mobility',
        '循环经济': 'Circular Economy'
      };
      
      // 确定使用哪个类别
      var categoryKey = category;
      if (categoryMapping[category]) {
        categoryKey = categoryMapping[category];
      }
      
      // 添加选项
      if (options[categoryKey]) {
        options[categoryKey].forEach(function(activity) {
          addOption(activity, activity);
        });
      } else {
        console.error('未知类别:', category);
      }

      // 触发计算和显示减排量
      calculateAndDisplayReduction();
    }

    // 添加选项的辅助函数
    function addOption(value, text) {
      $('#activity').append($('<option></option>').val(value).text(text));
    }

    // 计算并显示减排量的函数
    function calculateAndDisplayReduction() {
      var activity = $('#activity').val();
      var dataInput = parseFloat($('#dataInput').val()) || 0;

      // 减排系数（kg CO2 per unit）
      var reductionFactors = {
        '购物时自带袋子 / Bring your own bag when shopping': 0.0190,
        '早睡觉一小时 / Sleep an hour earlier': 0.0950,
        '刷牙时关掉水龙头 / Turn off the tap while brushing teeth': 0.0090,
        '出门自带水杯 / Bring your own water bottle': 0.0400,
        '垃圾分类 / Sort waste properly': 0.0004,
        '减少打印纸 / Reduce unnecessary printing paper': 0.0040,
        '减少使用一次性餐盒 / Reduce disposable meal boxes': 0.1900,
        '简易包装礼物 / Use minimal gift wrapping': 0.1400,
        '夜跑 / Night running': 0.0950,
        '自然风干湿发 / Air-dry wet hair': 0.1520,
        '点外卖选择"无需餐具" / Choose No-Cutlery when ordering delivery': 0.0540,
        '下班时关电脑和灯 / Turn off computer and lights when off-duty': 0.1660,
        '晚上睡觉全程关灯 / Keep lights off at night': 0.1100,
        '快速洗澡 / Take a quick shower': 0.1200,
        '阳光晾晒衣服 / Sun-dry clothes': 0.3230,
        '夏天空调调至26°C以上 / Set AC to above 78°F during Summer': 0.2190,
        '攒够一桶衣服再洗 / Save and wash a full load of clothes': 0.4730,
        '化妆品用完购买替代装 / Buy refillable cosmetics or toiletries': 0.0850,
        '购买本地应季水果 / Buy local seasonal fruits': 2.9800,
        '自己做饭 / Cook at home': 0.1900,
        '吃一顿轻食 / Have a light meal': 0.3600,
        '吃完水果蔬菜 / Finish all fruits and vegetables': 0.0163,
        '光盘行动 / Finish all food on the plate': 0.0163,
        '喝燕麦奶或植物基食品 / Drink oat milk or plant-based food': 0.6430,
        '公交地铁通勤 / Use public transport': 0.1005,
        '骑行探索城市 / Explore the city by bike': 0.1490,
        '种一棵树 / Plant a tree': 10.0000,
        '购买二手书 / Buy a second-hand book': 2.8800,
        '乘坐快轨去机场 / Take high-speed rail to the airport': 3.8700,
        '拼车 / Carpool': 0.0450,
        '自行车出行 / Travel by bike': 0.1490,
        '旅行时自备洗漱用品 / Bring your own toiletries when traveling': 0.0470,
        '旧物改造 / Repurpose old items': 0.7700,
        '购买一级能效家电 / Buy an energy-efficient appliance': 2.1500,
        '购买白色或浅色衣物 / Buy white or light-colored clothes': 3.4300,
        '花一天享受户外 / Spend a full day outdoors': 0.7570,
        '自己种菜并吃 / Grow and eat your own vegetables': 0.0250,
        '减少使用手机时间 / Reduce screen time': 0.0003
      };

      // 单位标签
      var unitLabels = {
        // 格式：'完整中文名 / 完整英文名': '单位' 
        '购物时自带袋子 / Bring your own bag when shopping': '个/count',
        '早睡觉一小时 / Sleep an hour earlier': '小时/hours',
        '刷牙时关掉水龙头 / Turn off the tap while brushing teeth': '次/times',
        '出门自带水杯 / Bring your own water bottle': '次/times',
        '垃圾分类 / Sort waste properly': '次/times',
        '减少打印纸 / Reduce unnecessary printing paper': '张/count',
        '减少使用一次性餐盒 / Reduce disposable meal boxes': '个/count',
        '简易包装礼物 / Use minimal gift wrapping': '次/times',
        '夜跑 / Night running': '小时/hours',
        '自然风干湿发 / Air-dry wet hair': '次/times',
        '点外卖选择"无需餐具" / Choose No-Cutlery when ordering delivery': '次/times',
        '下班时关电脑和灯 / Turn off computer and lights when off-duty': '次/times',
        '晚上睡觉全程关灯 / Keep lights off at night': '次/times',
        '快速洗澡 / Take a quick shower': '次/times',
        '阳光晾晒衣服 / Sun-dry clothes': '次/times',
        '夏天空调调至26°C以上 / Set AC to above 78°F during Summer': '小时/hours',
        '攒够一桶衣服再洗 / Save and wash a full load of clothes': '次/times',
        '化妆品用完购买替代装 / Buy refillable cosmetics or toiletries': '瓶/count',
        '购买本地应季水果 / Buy local seasonal fruits': 'kg',
        '自己做饭 / Cook at home': '次/times',
        '吃一顿轻食 / Have a light meal': '次/times',
        '吃完水果蔬菜 / Finish all fruits and vegetables': '次/times',
        '光盘行动 / Finish all food on the plate': '次/times',
        '喝燕麦奶或植物基食品 / Drink oat milk or plant-based food': '次/times',
        '公交地铁通勤 / Use public transport': 'km',
        '骑行探索城市 / Explore the city by bike': 'km',
        '种一棵树 / Plant a tree': '次/times',
        '购买二手书 / Buy a second-hand book': '本/count',
        '乘坐快轨去机场 / Take high-speed rail to the airport': '次/times',
        '拼车 / Carpool': 'km',
        '自行车出行 / Travel by bike': 'km',
        '旅行时自备洗漱用品 / Bring your own toiletries when traveling': '次/times',
        '旧物改造 / Repurpose old items': '次/times',
        '购买一级能效家电 / Buy an energy-efficient appliance': '次/times',
        '购买白色或浅色衣物 / Buy white or light-colored clothes': '件/count',
        '花一天享受户外 / Spend a full day outdoors': '天/days',
        '自己种菜并吃 / Grow and eat your own vegetables': 'kg',
        '减少使用手机时间 / Reduce screen time': '小时/hours'
      };

      // 显示减排量和单位
      $('#unitLabel').text(unitLabels[activity] || 'units');
      $('#reductionAmount').text((dataInput * reductionFactors[activity]).toFixed(4));
    }

    // 获取用户积分的函数
    function getUserPoints() {
      var token = localStorage.getItem('token');

      // 发送AJAX请求获取用户积分
      $.ajax({
        type: 'POST',
        url: 'get_user_points.php',
        data: {
          token: token
        },
        dataType: 'json',
        success: function (response) {
          if (response.success) {
            $('#userPoints').text(response.userPoints || response.points);
          } else {
            console.error('Error getting user points:', response.message);
          }
        },
        error: function () {
          console.error('AJAX请求失败');
        }
      });
    }

    // Global variable for the site key
    var turnstileSiteKey = null;

    // Function to fetch the Turnstile site key
    async function fetchTurnstileSiteKey() {
        try {
            const response = await fetch('get_config.php');
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            const config = await response.json();
            if (config && config.turnstile_sitekey) {
                turnstileSiteKey = config.turnstile_sitekey;
                console.log('Calculate page: Turnstile Site Key fetched.');
                // Now that the key is fetched, render the widget
                renderTurnstileWidget();
            } else {
                console.error('Calculate page: Failed to retrieve Turnstile site key.');
                 showAlert('无法加载验证组件配置。', 'error');
            }
        } catch (error) {
            console.error('Calculate page: Error fetching Turnstile site key:', error);
             showAlert('加载验证组件时出错。', 'error');
        }
    }

    // Function to render the Turnstile widget
    function renderTurnstileWidget() {
        if (!turnstileSiteKey) {
            console.error("Cannot render Turnstile widget: site key not available.");
            return;
        }
        if (window.turnstile) {
             var container = document.getElementById('turnstile-calculate-widget');
             if (container.innerHTML.trim() === '') { // Render only if empty
                 window.turnstile.render('#turnstile-calculate-widget', {
                    sitekey: turnstileSiteKey, // Use fetched key
                    callback: turnstileCallbackCalculate,
                     'expired-callback': function() {
                         console.log('Calculate Turnstile expired');
                         // Optionally disable submit button or show message
                     },
                     'error-callback': function(){
                          console.error('Calculate Turnstile error');
                          // Optionally disable submit button or show message
                     }
                });
             }
        } else {
            console.error("Turnstile object not loaded yet for calculate page.");
            // Script loading should be handled by loadTurnstileScript
        }
    }

    // Callback function for Calculate page Turnstile
    function turnstileCallbackCalculate(token) {
        console.log('Calculate Turnstile verified with token:', token);
        // Optional: Enable submit button
        $('#submitButton').prop('disabled', false);
    }

    // Function to dynamically load Turnstile script
    function loadTurnstileScript() {
        if (!window.turnstile && !document.querySelector('script[src*="challenges.cloudflare.com/turnstile"]')) {
            const script = document.createElement('script');
            script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js?onload=turnstileScriptLoadedCallbackCalculate';
            script.async = true;
            script.defer = true;
            document.head.appendChild(script);
        }
    }

    // Callback function when Turnstile script is loaded for this page
    function turnstileScriptLoadedCallbackCalculate() {
        console.log('Turnstile API script loaded for calculate.html.');
        // Attempt to render the widget now that the script is loaded and key should be fetched
        fetchTurnstileSiteKey(); // Fetch key which will then call render
    }
  </script>
</head>
<body>
<!-- 导航栏容器，将由JavaScript加载 -->
<div id="navbar-container"></div>

<header class="calc-header">
  <div class="container">
    <h1>Carbon Accounting Portal</h1>
    <p>Record your sustainable actions and track your positive impact on the environment. Every small action counts towards a greener future.</p>
  </div>
</header>

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <div class="calculator-card frosted-glass ios-depth-effect">
        <div class="calculator-header">
          <h2>Log Your Carbon Reduction Behavior</h2>
          </div>
        <div class="calculator-body">
          <p class="alert alert-info" role="alert" style="text-align: center;">
            If you need to record activities related to "Housing," please click <a href="speccal.html" class="alert-link">here</a> to jump to the corresponding page.
          </p>
          
          <form id="carbonForm" method="post" enctype="multipart/form-data">
          <div class="form-group">
              <label for="category">Category</label>
              <select class="form-control" id="category" name="category">
                <option value="绿色生活">绿色生活 Green Lifestyle</option>
                <option value="低碳饮食">低碳饮食 Low-Carbon Diet</option>
                <option value="绿色出行">绿色出行 Sustainable Mobility</option>
                <option value="循环经济">循环经济 Circular Economy</option>
              </select>
    </div>
          <div class="form-group">
              <label for="activity">Activity</label>
              <select class="form-control" id="activity" name="activity">
                <!-- 将由JavaScript动态填充 -->
              </select>
  </div>
          <div class="form-group">
              <label for="dataInput">Quantity <span id="unitLabel">units</span></label>
              <input type="number" class="form-control" id="dataInput" name="data" placeholder="Enter amount" min="0.1" step="0.1" required>
      </div>
          <div class="form-group">
              <label for="date">Date</label>
              <input type="date" class="form-control" id="date" name="date" value="" required>
              <script>document.getElementById('date').valueAsDate = new Date()</script>
          </div>
          <div class="form-group">
              <label for="imageUpload">Upload Photo Evidence</label>
              <div class="file-drop-area">
                <input type="file" class="file-input" id="imageUpload" name="image" accept="image/*" required>
                <div class="file-upload-icon">
                  <i class="fas fa-cloud-upload-alt"></i>
          </div>
                <div class="file-message">Drag and drop or click to upload</div>
                <div class="file-drop-info">Supports: JPG, PNG, HEIF (Max 5MB)</div>
                
                <div class="image-preview-container">
                  <img id="imagePreview" src="" alt="Image Preview">
                  <div class="remove-image-btn">
                    <i class="fas fa-times"></i>
      </div>
        </div>
                <div class="file-name"></div>
      </div>
              <div class="progress">
                <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
  </div>
            <div class="form-group">
              <label for="notes">Notes (Optional)</label>
              <textarea class="form-control" id="notes" name="notes" rows="3" placeholder="Add any additional notes here"></textarea>
</div>
            
            <!-- Add Cloudflare Turnstile Widget -->
            <div class="form-group">
                 <div id="turnstile-calculate-widget" class="cf-turnstile" data-callback="turnstileCallbackCalculate"></div>
            </div>
            
            <button type="button" class="btn btn-outline-info mb-3" data-toggle="modal" data-target="#tutorialModal">
              <i class="fas fa-question-circle"></i> Submission Guide
        </button>
            <button type="submit" id="submitButton" class="btn btn-ios-primary btn-block">Submit Carbon Reduction</button>
        </form>
          <div id="submissionResult" class="mt-3"></div>
      </div>
          </div>
          </div>
    
    <div class="col-md-4">
      <div class="result-card ios-hover-effect">
        <h3>Your Estimated Carbon Reduction</h3>
        <div class="result-value"><span id="reductionAmount">0.00</span></div>
        <p class="result-unit">kg CO₂ equivalent</p>
            </div>

      <div class="calculator-card mt-4">
        <div class="calculator-header">
          <h2>Your Account</h2>
          </div>
        <div class="calculator-body">
          <p><strong>Total Carbon Credits:</strong> <span id="userPoints">Loading...</span></p>
          <a href="center.html" class="btn btn-outline-primary btn-block">View Account History</a>
          </div>
        </div>
      
      <div class="activity-card mt-4">
        <h4>Environmental Impact</h4>
        <p>Every action you record helps reduce carbon emissions and contributes to a more sustainable future. Track your progress and see the difference you're making!</p>
      </div>

      <div class="activity-card mt-4">
        <h4>Reference</h4>
        <p>Our carbon accounting algorithm references scientifically grounded carbon reduction values from the IPO’s 
          <a href="https://wwwen.ipe.org.cn/reports/report_21939.html" target="_blank" style="text-decoration: underline;">Briefing Note on Calculating Emission Reductions from Individual Daily Activities
          </a>.
        </p>
      </div>
    </div>
  </div>
</div>

<!-- 模态窗口 - 提交指南 -->
<div class="modal fade" id="tutorialModal" tabindex="-1" role="dialog" aria-labelledby="tutorialModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="tutorialModalLabel">Submission Guide</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p class="alert alert-info" role="alert" style="text-align: center;">
          In the input, enter the amount/frequency corresponding to your carbon-reduction activity, and upload the photo proof. For example, if Jeffery
          <a class="alert-link font-weight-bold text-uppercase" style="color: #ff0000; text-decoration: underline;"> cycled </a>
          <a class="alert-link font-weight-bold text-uppercase" style="color: #ff0000; text-decoration: underline;">4.3</a> kilometers, he would select "
          <a class="alert-link font-weight-bold text-uppercase" style="color: #ff0000; text-decoration: underline;">Cycle 1km</a>", input 
          <a class="alert-link font-weight-bold text-uppercase" style="color: #ff0000; text-decoration: underline;">4.3</a>, and upload a screenshot of his 
          <a class="alert-link font-weight-bold text-uppercase" style="color: #ff0000; text-decoration: underline;">travel details.</a> The platform 
          <a class="font-weight-bold">trusts</a> every user; most records will be transformed into carbon credits immediately, and verification will be completed within 3 working days.
          <br>
          <a>e.g.<img src="img/eg.png" class="card-img-top responsive-img"></a>
          <br>
          <a>行程截图Travel Screenshot<img src="img/teg.png" class="card-img-top responsive-img"></a>
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- 成功提交模态框 -->
<div class="modal fade" id="successModal" tabindex="-1" role="dialog" aria-labelledby="successModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content success-modal">
      <div class="modal-header">
        <h5 class="modal-title" id="successModalLabel">Submission Successful</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body text-center">
        <div class="success-icon">
          <i class="fas fa-check-circle"></i>
        </div>
        <h4>Carbon Reduction Recorded!</h4>
        <div class="points-value"><span id="successPoints">0</span> points</div>
        <p>Your contribution has been recorded and added to the review queue. Thank you for making a difference!</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-success" data-dismiss="modal">Continue</button>
      </div>
    </div>
  </div>
</div>

<!-- 页脚 -->
<div id="footer-placeholder"></div>
</body>
</html>